<template>
	<view style="min-height: 100vh;background: white;">
		<view class="heads">
			<view :class="[headIndex==0?'active':'']" data-index="0" @click="changeNav">认证码认证</view>
			<view :class="[headIndex==1?'active':'']" data-index="1" @click="changeNav">客服认证</view>
		</view>
		<view class="userMsgWrap">
			<view class="userMsg">
				<image :src="user.imgUrl"></image>
				<view class="userMsgR">
					<view class="userMsgRT">
						<view class="userName">{{user.name}}</view>
						<view class="userLabel">
							<view class="labelItem" v-for="(item,index) in info.label">{{item.name}}</view>
						</view>
					</view>
					<view class="userMsgRB">
						<view class="fans">粉丝：{{user.fans}}</view>
						<view class="goods">获赞：{{user.give}}</view>
						<!-- <view class="collect">收藏：1000</view> -->
					</view>
				</view>
				<view class="platfrom" v-if="user.platform==1" style="background: #260A20;">
					<image src="../../static/mine/douyin_white.png" style="width: 24upx;height: 24upx;"></image>
				</view>
				<view class="platfrom" v-if="user.platform==2">
					<image src="../../static/mine/xiaohongshu_white.png"></image>
				</view>
				<view class="platfrom" v-if="user.platform==3" style="background: #F36326;">
					<image src="../../static/mine/dazong_white.png" style="width: 20upx;height: 20upx;"></image>
				</view>
				<view class="platfrom" v-if="user.platform==4" style="background: #FFD974;">
					<image src="../../static/mine/weibo_white.png" style="width: 24upx;height: 22upx;"></image>
				</view>
				
				
			</view>
		</view>
		<view class="content" v-if="headIndex==0">
			<view class="contentTitle" v-if="user.platform==1">复制一下认证码，抖音原有的【个人简介】删除后添加认证码</view>
			<view class="contentTitle" v-if="user.platform==2">复制一下认证码，小红书原有的【个人简介】删除后添加认证码</view>
			<view class="contentTitle" v-if="user.platform==3">复制一下认证码，大众点评原有的【个人简介】删除后添加认证码</view>
			<view class="contentTitle" v-if="user.platform==4">复制一下认证码，微博原有的【个人简介】删除后添加认证码</view>
			
			
			<view class="contentTip" @click="previewImg">
				<image src="../../static/mine/explain.png"></image>
				<text>如何修改?</text>
			</view>
			<view class="contentWrap">
				<view>{{info.user.randStr}}</view>
				<view @click="copyLink">复制</view>
				<!-- <view style="margin-left: 20upx;font-size: 28upx;" @click="getCode">重新获取</view> -->
			</view>
			<view class="contentExplain">(完成认证后即可删除认证码,认证码十分钟有效)</view>
			<view class="realBtn" @click="sureReal">认证</view>
			<view class="realTip">改完简介后点击认证(可能需要等1-2分钟)</view>
		</view>
		<view style="padding-top: 24upx;" v-if="headIndex==1">
			<view class="Release_top">
				<!-- <view class="inputBox">
					分享链接
				</view>
				<view class="textareaBox">
					<textarea placeholder="请输入分享链接~" v-model="urlShare" :auto-height="true" maxlength="-1" />
				</view> -->
				<view style="font-size: 28upx;color: #000;">请上传可以证明身份的图片，后台审核通过后将自动生成达人名片</view>
				<view class="ImageBox">
					<view class="ImageList">
						<view class="ImageItem" v-if="ImageList.length>0&&item" v-for="(item,index) in ImageList"
							@click="previewImage(index)">
							<image :src="getImage(item)" mode=""></image>
							<view class="colseIcon" @click.stop="deleteImage(index)">
								<u-icon name="close" color="#fff" size="15"></u-icon>
							</view>
						</view>
						<view class="uploadBox" @click="uploadImg" v-if="ImageList.length < 9">
							<u-icon name="camera" size="50" color="#666"></u-icon>
							<view class="cameratitle">上传个人中心照片</view>
						</view>
					</view>
				</view>
			</view>
			<view class="submit" @click="sureReal">提交</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				user:{},
				info:{},
				reqFlag:true,
				headIndex:0,
				ImageList:[],
				urlShare:""
			}
		},
		onLoad() {
      // #ifdef APP-PLUS
      var args = plus.runtime.arguments;
      if(args){
        app.$vm.setShareDetail(args);
      }
      // #endif
			this.info = uni.getStorageSync("realData");
			this.user = this.info.user;
		},
		methods: {
			deleteImage(index) {
				// console.log(index);
				this.ImageList.splice(index, 1);
			},
			getImage(url) {
				// console.log(app.$vm.globalData.imgBaseUrl + url)
				if(url&&(url.indexOf("http://")!=-1||url.indexOf("https://")!=-1)){
					return url;
				}else{
					return app.$vm.globalData.imgBaseUrl + url;
				}
			},
			uploadImg(){
				let self = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: function(result) {
						console.log(result);
						// self.ImageList = self.ImageList.concat(res.tempFilePaths);
						uni.showLoading({
							title: "上传图片中..."
						})
						app.$vm.updataAvator(result.tempFilePaths[0]).then(rep => {
							self.ImageList = [rep];
							uni.hideLoading();
							self.$forceUpdate()
						});
					},
					fail:err=>{
						if(err.errMsg!='chooseImage:fail cancel'){
							app.$vm.checkAuth("scope.camera").then(resultConfirm=>{
								if(resultConfirm){
									uni.showModal({
										title:"系统繁忙，请稍后再试"
									})
								}else{
									uni.showModal({
										title:"请检查摄像头和相册权限后重试"
									})
								}
							})
						}
					}
				});
				// uni.chooseImage({
				// 	count: 9, //默认9
				// 	sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				// 	sourceType: ['album','camera'], //从相册选择
				// 	success: function(result) {
				// 		console.log(result);
				// 		// self.ImageList = self.ImageList.concat(res.tempFilePaths);
				// 		uni.showLoading({
				// 			title: "上传图片中..."
				// 		})
				// 		let j = result.tempFilePaths.length;
				// 		let arr = JSON.parse(JSON.stringify(self.ImageList))
				// 		let p = arr.length;
				// 		for (let i = 0; i < result.tempFilePaths.length; i++) {
				// 			self.ImageList.push("");
				// 		}
				// 		for (let i = 0; i < result.tempFilePaths.length; i++) {
				// 			app.$vm.updataAvator(result.tempFilePaths[i]).then(rep => {
				// 				j--;
				// 				self.ImageList.splice((p + i), 1, rep)
				// 				if (j == 0) {
				// 					uni.hideLoading();
				// 				}
				// 				console.log(self.ImageList)
				// 				self.$forceUpdate()
				// 			});
				// 		}
				// 	},
				// 	fail:err=>{
				// 		if(err.errMsg!='chooseImage:fail cancel'){
				// 			app.$vm.checkAuth("scope.camera").then(resultConfirm=>{
				// 				if(resultConfirm){
				// 					uni.showModal({
				// 						title:"系统繁忙，请稍后再试"
				// 					})
				// 				}else{
				// 					uni.showModal({
				// 						title:"请检查摄像头和相册权限后重试"
				// 					})
				// 				}
				// 			})
				// 		}
				// 	}
				// });
			},
			changeNav(e){
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				this.headIndex = index;
			},
			previewImg(){
				uni.navigateTo({
					url:"/pages/pagefour/pages/realImg/realImg?type=real&index="+this.user.platform
				})
			},
			getCode(){
				
			},
			copyLink(){
				uni.setClipboardData({
					data:this.user.randStr
				})
			},
			sureReal(){
				if(!this.reqFlag){
					return false;
				}
				this.reqFlag = false;
				let obj = {};
				obj.money = this.info.money ? Number(this.info.money) : 0;
				obj.introduce = this.info.content;
				obj.label = [];
				obj.gender = Number(this.info.user.gender) + 1;
				if(this.headIndex == 1){
					obj.image_url = this.ImageList[0];
					if(!obj.image_url){
						this.$refs.uToast.show({
							title:"请上传身份图片进行认证",
							duration:2000,
							type:"error"
						})
						return false;
					}
					obj.type = 1;
				}else{
					obj.type = 0;
				}
				
				for(let i=0;i<this.info.label.length;i++){
					obj.label.push(this.info.label[i].id);
				}
				if(this.user.platform==1){
					obj.short_id = this.user.id;
					this.$u.api.analysisDyVerification(obj).then(res=>{
						console.log(res)
						this.$refs.uToast.show({
							title:res.message,
							duration:2000,
							type:"success"
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:2
							})
						},1500)
					})
					.catch(err=>{
						this.reqFlag = true;
					})
				}else if(this.user.platform==2){
					obj.red_id = this.user.id;
					this.$u.api.analysisXhsVerification(obj).then(res=>{
						console.log(res)
						this.$refs.uToast.show({
							title:res.message,
							duration:2000,
							type:"success"
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:2
							})
						},1500)
					})
					.catch(err=>{
						this.reqFlag = true;
					})
				}else if(this.user.platform==3){
					obj.user_id = this.user.id;
					this.$u.api.analysisDzdpVerification(obj).then(res=>{
						console.log(res)
						this.$refs.uToast.show({
							title:res.message,
							duration:2000,
							type:"success"
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:2
							})
						},1500)
					})
					.catch(err=>{
						this.reqFlag = true;
					})
				}else if(this.user.platform==4){
					obj.id = this.user.id;
					this.$u.api.analysisWbVerification(obj).then(res=>{
						console.log(res)
						this.$refs.uToast.show({
							title:res.message,
							duration:2000,
							type:"success"
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:2
							})
						},1500)
					})
					.catch(err=>{
						this.reqFlag = true;
					})
				}
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.submit{
		width: 638upx;
		height: 88upx;
		border-radius: 44upx;
		background: #FFAC3F;
		line-height: 88upx;
		text-align: center;
		color: white;
		margin: 120upx auto 0;
		font-size: 28upx;
	}
	.Release_top {
		width: 750upx;
		padding: 32upx 24upx 0 24upx;
		background-color: #fff;
		// margin-top: 16upx;
	
		.inputBox {
			width: 100%;
			font-size: 28upx;
			color: #333333;
		}
	
		.textareaBox {
			padding: 24upx 0;
			width: 100%;
			// height: 400upx;
			overflow: auto;
	
			textarea {
				width: 100%;
				height: 100%;
				font-size: 26upx;
				line-height: 45upx;
				color: #333333;
				font-weight: 400;
			}
		}
	
		.ImageBox {
			margin-top: 30upx;
			// padding-bottom: 32upx;
			.ImageList {
				display: flex;
				flex-wrap: wrap;
	
				.ImageItem {
					position: relative;
					width: 144upx;
					height: 144upx;
					border-radius: 8upx;
					// background-color: #F0AD4E;
					margin-right: 16upx;
					margin-bottom: 16upx;
	
					// overflow: hidden;
					.colseIcon {
						display: flex;
						align-items: center;
						justify-content: center;
						position: absolute;
						top: -10upx;
						right: -10upx;
						width: 40upx;
						height: 40upx;
						border-radius: 50%;
						background-color: #4b4b4b;
					}
	
					.videoIcon {
						position: absolute;
						top: 40%;
						left: 50%;
						transform: translate(-50%);
					}
	
					video {
						width: 100%;
						height: 100%;
						border-radius: 8upx;
					}
	
					image {
						width: 100%;
						height: 100%;
						border-radius: 8upx;
					}
				}
	
				.uploadBox {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 144upx;
					height: 144upx;
					background: #F5F5F5;
					border: 2upx solid #E5E5E5;
					opacity: 1;
					border-radius: 8upx;
	
					.cameratitle {
						font-size: 16upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #666;
						margin-top: 8upx;
					}
				}
			}
		}
	
		.topicBox {
			width: calc(750upx - 48upx);
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24upx 0;
			box-sizing: border-box;
	
			.topicIcon {
				display: flex;
				align-items: center;
	
				.IconBox {
					font-size: 30upx;
					color: #999999;
				}
	
				.topicName {
					font-size: 24upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					margin-left: 8upx;
				}
	
				.ellipsis {
					width: calc(750upx - 150upx);
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
	}
	
	
	.heads{
		width: 100%;
		height: 80upx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: white;
	}
	.heads>view{
		width: 300upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		font-size: 28upx;
		color: #000;
	}
	.heads>view.active{
		color: #FFAC3F;
	}
	
	
	.content{
		padding: 48upx 56upx 30upx;
	}
	.contentTitle{
		font-size: 28upx;
		color: #333333;
		font-weight: bold;
		margin-bottom: 32upx;
	}
	.contentTip{
		display: flex;
		align-items: center;
		margin-bottom: 20upx;
	}
	.contentTip>image{
		width: 24upx;
		height: 24upx;
		margin-right: 6upx;
	}
	.contentTip>text{
		font-size: 20upx;
		line-height: 24upx;
		color: #FF5555;
	}
	.contentWrap{
		width: 100%;
		height: 152upx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #FFF9F2;
		border: 2upx solid #FFAC3F;
	}
	.contentWrap>view:nth-child(1){
		font-size: 30upx;
		color: #333333;
	}
	.contentWrap>view:nth-child(2){
		text-align: center;
		line-height: 44upx;
		border-radius: 22upx;
		font-size: 20upx;
		color: white;
		background: #FFAC3F;
		margin-left: 8upx;
		width: 104upx;
	}
	.contentExplain{
		font-size: 20upx;
		color: #999999;
		margin-top: 20upx;
		text-align: center;
	}
	.realBtn{
		width: 100%;
		height: 88upx;
		line-height: 88upx;
		border-radius: 44upx;
		background: #FFAC3F;
		color: white;
		text-align: center;
		font-size: 24upx;
		margin-top: 64upx;
		margin-bottom: 20upx;
	}
	.realTip{
		font-size: 24upx;
		color: #999999;
		text-align: center;
	}
	
	
	
	.platfrom{
		width: 68upx;
		height: 32upx;
		border-radius: 20upx 0 20upx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #F40A0B;
		position: absolute;
		right: 0;
		bottom: 0;
	}
	.platfrom>image{
		width: 38upx;
		height: 16upx;
	}
	.userMsgWrap{
		width: 100%;
		box-sizing: border-box;
		padding: 24upx;
		background: #F3F3F3;
	}
	.userMsg{
		width: 100%;
		padding: 32upx;
		display: flex;
		position: relative;
		background-color: white;
		border-radius: 20upx;
	}
	.userMsg>image{
		width: 48upx;
		height: 48upx;
		border-radius: 50%;
		margin-right: 16upx;
	}
	.userMsgR{
		width: calc(100% - 64upx);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 48upx;
	}
	.userMsgRT{
		display: flex;
		align-items: center;
	}
	.userName{
		font-size: 20upx;
		line-height: 20upx;
		color: #333333;
		margin-right: 24upx;
	}
	.userLabel{
		display: flex;
	}
	.labelItem{
		line-height: 24upx;
		height: 24upx;
		padding: 0 8upx;
		border-radius: 8upx;
		background: #EEEEEE;
		color: #878787;
		font-size: 16upx;
		margin-right: 16upx;
	}
	.labelItem:last-child{
		margin-right: 0;
	}
	.userMsgRB{
		display: flex;
		align-items: center;
	}
	.fans{
		font-size: 20upx;
		line-height: 20upx;
		color: #666666;
		margin-right: 32upx;
	}
	.goods{
		font-size: 20upx;
		line-height: 20upx;
		color: #666666;
		margin-right: 32upx;
	}
	.collect{
		font-size: 20upx;
		line-height: 20upx;
		color: #666666;
	}
</style>
